<%@ page import="com.google.appengine.api.blobstore.BlobstoreServiceFactory" %>
<%@ page import="com.google.appengine.api.blobstore.BlobstoreService" %>

<!-- Redirect to the login page if there is no session created -->
<%
if (session.getAttribute("username") == null || session.getAttribute("username") != null) {
	response.sendRedirect("/login.html");
}
BlobstoreService blobstore = BlobstoreServiceFactory.getBlobstoreService();
%>
<div id="wrapper">
	<div id="steps">
	    <form action="<%= blobstore.createUploadUrl("/uploadAudio") %>" method="post" enctype="multipart/form-data" onsubmit="return uploadValidation()">
	        <fieldset class="step">
				<legend>Upload a Media File</legend>
				<div id="LeftSide">
					<div><img src="images/upload_file.png" width="175" height="175" id="right_image"/></div>
				</div>
				<div id="RightSide" style="margin-top:-175px; margin-left:150px;">	
	        	<p>
		        	<label for="mediaName">Media Name: </label>
		        	<input id="mediaNameID" type="text" name="mediaName" /><span id="mediaNameError" style="float: right; color: red;"></span>
	        	</p>
	        	<p>
	        		<label for="fileName">Select File: </label>
	        		<input id="fileNameID" type="file" name="fileName" /><span id="fileNameError" style="float: right; color: red;"></span>
	        		
	        	</p>
	        	<script type="text/javascript">
	        		function showExtraDetails() {
	        			var fileName = document.getElementById("fileNameID").value;
	        			if (fileName == "") {
	        				document.getElementById("extraDetailsID").checked = false;
	        				document.getElementById("checkboxError").innerHTML = "Select a File First!";
	        			} else {
	        				document.getElementById("checkboxError").innerHTML = "";
	        				var extension = fileName.split(".");
	        				if (extension[1] == "avi" || extension[1] == "mov" || extension[1] == "mp4" || extension[1] == "mpg" || extension[1] == "wmv") {
	        					if (document.getElementById("extraDetailsID").checked == true) {
	        						document.getElementById("videoDetails").style.display = 'inline';
	        					} else {
	        						document.getElementById("videoDetails").style.display = 'none';
	        					}
	        				} else if (extension[1] == "mp3" || extension[1] == "wav" || extension[1] == "wma") {
	        					if (document.getElementById("extraDetailsID").checked == true) {
	        						document.getElementById("audioDetails").style.display = 'inline';
	        					} else {
	        						document.getElementById("audioDetails").style.display = 'none';
	        					}
		        			} else if (extension[1] == "jpg" || extension[1] == "gif" || extension[1] == "png" || extension[1] == "bmp" || extension[1] == "JPG") {
	        					if (document.getElementById("extraDetailsID").checked == true) {
	            					document.getElementById("imageDetails").style.display = 'inline';
	            				} else {
	            					document.getElementById("imageDetails").style.display = 'none';
	            				}
	    	        		} else if (extension[1] == "doc" || extension[1] == "pdf" || extension[1] == "txt") {
	        					if (document.getElementById("extraDetailsID").checked == true) {
	            					document.getElementById("documentDetails").style.display = 'inline';
	            				} else {
	            					document.getElementById("documentDetails").style.display = 'none';
	            				}
	    	        		}
	        			}
	        		}	
	        	</script>
	        	<p>
	        		<label for="extraDetails">Additional Details: </label>
	        		<input id="extraDetailsID" type="checkbox" name="extraDetails" style="float: left; width: 25px;" onClick="showExtraDetails()"/>
	        		<span id="checkboxError" style="float: right; color: red;"></span>
	        	</p>
	        	<div id="audioDetails" style="display: none;">
		        	<p>
		        		<label>Artist: </label>
		        		<input type="text" name="artist" />
		        	</p>
		        	<p>
		        		<label>Music Album: </label>
		        		<input type="text" name="audioAlbum" />
		        	</p>
		        	<p>
		        		<label>Music Genre: </label>
		        		<select name="audioGenre">
		        			<option value="Blues">Blues</option>
		        			<option value="Country">Country</option>
		        			<option value="Electronic">Electronic</option>
		        			<option value="Jazz">Jazz</option>
		        			<option value="Pop">Pop</option>
		        			<option value="Rap">Rap</option>
		        			<option value="Rock">Rock</option>
		        			<option value="Soundtrack">Soundtrack</option>
		        			<option value="Other">Other</option>
		        		</select>
		        	</p>
	        	</div>
	        	<div id="videoDetails" style="display: none;">
		        	<p>
		        		<label>Video Genre: </label>
		        		<select name="videoGenre">
		        			<option value="Action">Action</option>
		        			<option value="Adventure">Adventure</option>
		        			<option value="Comedy">Comedy</option>
		        			<option value="Documentary">Documentary</option>
		        			<option value="Horror">Horror</option>
		        			<option value="Other">Other</option>
		        		</select>
		        	</p>
		        	<p>
		        		<label>Year Released: </label>
		        		<input type="text" name="year" />
		        	</p>
		        	<p>
		        		<label>Parental Rating: </label>
		        		<select name="rating">
		        			<option value="G">G</option>
		        			<option value="PG">PG</option>
		        			<option value="M15">M15</option>
		        			<option value="MA">MA</option>
		        			<option value="R18">R18</option>
		        		</select>
		        	</p>
	        	</div>
	        	<div id="imageDetails" style="display: none;">
		        	<p>
		        		<label>Photo Album: </label>
		        		<input type="text" name="photoAlbum" />
		        	</p>
	        	</div>
	        	<div id="documentDetails" style="display: none;">
		        	<p>
		        		<label>Document Collection: </label>
		        		<input type="text" name="documentAlbum" />
		        	</p>
	        	</div>
	        	<div class="sunbmit">
		        	<div style="float:right; margin-top:20px;">
		        		<button type="reset" name="btnClear">Clear</button>
		        	</div> 
		        	<div style="float:right; margin-top:20px; margin-right:10px;">
		        		<button type="submit" name="btnUpload">Upload File</button>
		        	</div>
	        	</div>
	        	</div>
	    	</fieldset>
		</form>
	</div>
</div>